<template>
  <div id="home">
    <homeTop></homeTop>
    <transition>
      <div class="guide" v-show="isShow">
        <input
          type="text"
          placeholder="请输入"
          @click="this.$router.push('/search/searchindex')"
        />
      </div>
    </transition>
    <!-- 首页轮播图 -->
    <nut-swiper
      :init-page="page"
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="3000"
      class="lunbo"
    >
      <nut-swiper-item v-for="item in carouselList" :key="item.id">
        <img :src="item.s_photos[0].path" />
      </nut-swiper-item>
    </nut-swiper>
    <!-- 商品展示页模块 -->
    <div class="product">
      <!-- 本周爆款轮播图模块 -->
      <div class="hot">
        <!-- 本周爆款标题 -->
        <div class="title">
          <p>本周爆款</p>
          <p @click="this.$router.push('/HotSelling')">更多</p>
        </div>
        <!-- 本周爆款轮播图列表 -->
        <div class="list">
          <nut-swiper
            :init-page="page2"
            :loop="true"
            touchable="true"
            is-center="true"
            width="347"
            height="173"
            class="swiper-wrapper"
          >
            <nut-swiper-item>
              <div class="box">
                <div v-for="item in goodsList.slice(0, 3)" :key="item.id">
                  <img :src="item.s_goods_photos[0].path" />
                  <p>{{ item.name }}</p>
                  <p>￥{{ item.price }}</p>
                </div>
              </div>
            </nut-swiper-item>
            <nut-swiper-item>
              <div class="box">
                <div v-for="item in goodsList.slice(0, 3)" :key="item.id">
                  <img :src="item.s_goods_photos[0].path" />
                  <p>{{ item.name }}</p>
                  <p>￥{{ item.price }}</p>
                </div>
              </div>
            </nut-swiper-item>
          </nut-swiper>
        </div>
      </div>
      <!-- 推荐列表模块 -->
      <div class="recommend">
        <!-- 为你推荐标题 -->
        <div class="title">
          <p>为你推荐</p>
        </div>
        <!-- 为你推荐列表模块 -->
        <div class="recommendList">
          <div
            class="recommends"
            v-for="item in [...goodsList, ...goodsList]"
            :key="item.id"
          >
            <router-link to="/GoodsDetails">
              <img :src="item.s_goods_photos[0].path" />
              <div>
                <h3>
                  {{ item.name }}
                </h3>
                <span>满300减30</span>
                <span>店铺领券</span>
                <p>￥{{ item.price }}</p>
              </div>
            </router-link>
          </div>
        </div>
        <!--没有更多提示-->
        <p class="tip">没有更多了哦~</p>
      </div>
    </div>
  </div>
</template>

<script>
// 引入顶部搜索框
import homeTop from '../components/hometopCom.vue'
// 轮播图
import { getCarousel } from '../api/product.js'
// 引入辅助函数
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      page2: 2,
      //  商品列表数据
      //   goodsList: [],
      //   轮播图
      carouselList: [],
      //   搜索显示隐藏
      isShow: false,
    }
  },

  async mounted () {
    //  从VueX拿取商品列表
    // this.goodsList = this.$store.state.goodstList

    //   获取轮播图数据
    const res = await getCarousel()
    this.carouselList = res.data.result.filter((ele, index) => index < 4)
    //console.log(this.carouselList);

    // 吸顶导航监听
    window.addEventListener('scroll', this.showNav)

    this.getGoodsListData()
  },
  methods: {
    showNav () {
      if (window.pageYOffset > 100) {
        this.isShow = true
        this.watch = true
      } else {
        this.isShow = false
        this.watch = false
      }
    },
    ...mapActions(['getGoodsListData'])
  },
  computed: {
    ...mapState(['goodsList'])
  },
  components: {
    //  注册顶部搜索框
    homeTop
  },
  beforeUnmount () {
    //   销毁window全局监听
    window.removeEventListener("scroll", this.showNav)
  }
}
</script>

<style lang="scss" scoped>
// 首页顶部轮播图
.lunbo {
  .nut-swiper-item {
    line-height: 40vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 吸顶导航
.v-leave-from,
.v-enter-to {
  opacity: 1;
}
.v-leave-to,
.v-enter-from {
  opacity: 0;
}
.v-leave-active,
.v-enter-active {
  transition: all 0.5s;
}
#home {
  .guide {
    position: fixed;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 16px;
    background: #fff;
    box-sizing: border-box;
    input {
      width: 235px;
      height: 32px;
      border: none;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 0 0 13px;
      border-radius: 16px;
      box-shadow: 0 0 8px rgb(0 0 0 / 4%);
      background: #eae9e5;
    }
  }
  background-color: #c1ab96;
  .product {
    width: 92vw;
    padding-bottom: 16vw;
    margin: 0 auto;
    .title {
      width: 100%;
      height: 16vw;
      display: flex;
      justify-content: space-between;
      p {
        letter-spacing: 0.267vw;
        color: #f2f2f2;
        height: 16vw;
        line-height: 16vw;
        &:first-child {
          font-size: 4vw;
          font-weight: bolder;
        }
      }
    }
    .list {
      width: 92.533vw;
      height: 46.133vw;
      background-color: #f2f2f2;
      border-radius: 1.333vw;
      box-shadow: 0.533vw 0.267vw 0.8vw rgb(62, 62, 62);
      .swiper-wrapper {
        width: 100%;
        height: 100%;
      }
      .nut-swiper-item {
        background-color: #f2f2f2;
        border-radius: 1.333vw;
        width: 92.533vw;
        height: 46.133vw;
        line-height: 4vw;

        .box {
          display: flex;
          width: 102%;
          height: 111%;
          justify-content: space-evenly;
          align-items: center;
        }

        img {
          background-color: blueviolet;
          box-shadow: 0.533vw 0.267vw 0.8vw rgb(62, 62, 62);
          width: 26.667vw;
          height: 26.667vw;
        }
        p {
          height: 8vw;
          width: 28.667vw;
          overflow: hidden;
          &:nth-of-type(2) {
            font-weight: bolder;
          }
        }
      }
    }
    .recommendList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .recommends {
        background-color: #f2f2f2;
        width: 44vw;
        height: 69.333vw;
        border-radius: 1.333vw;
        margin-bottom: 3.467vw;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 2.667vw 5.333vw,
          rgba(0, 0, 0, 0.23) 0px 1.6vw 1.6vw;
        img {
          width: 44vw;
          height: 44vw;
          border-radius: 2.667vw;
          background-color: darkorchid;
        }
        div {
          box-sizing: border-box;
          margin: 0.8vw 3.2vw 0 3.2vw;
          h3 {
            overflow: hidden;
            line-height: 1.3;
            font-size: 3.733vw;
            height: 9.6vw;
            margin-bottom: 1.067vw;
          }
          span {
            display: inline-block;
            font-size: 2.667vw;
            border-radius: 1vw;
            margin-bottom: 0.8vw;
            color: #8e7e6f;
            border: #8e7e6f 0.4vw solid;
            &:nth-of-type(1) {
              border-right: 0;
            }
            &:nth-of-type(2) {
              border-left: #8e7e6f 0.4vw dashed;
            }
          }
          p {
            font-size: 14px;
            &:last-of-type {
              font-weight: bolder;
            }
          }
        }
      }
    }
    .tip {
      margin: 0 auto;
      font-weight: bolder;
      color: #f2f2f2;
      line-height: 14.667vw;
      width: 26.667vw;
    }
  }
}
</style>